<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">动作详情</block>
    </cu-custom>
    <view>
      <view class="bg-img relative u-f-ajc">
        <image :src="datas.picUrl ? 'https://jxjsservice.jxfit.cn/file'+datas.picUrl : '../../static/37.png'" lazy-load />
        <view style="color: #FFFFFF; font-size: 40rpx;position: relative;z-index: 2;">{{datas.name}}</view>
      </view>
      <view class="title-list mbttom15">
        <view class="titles">{{datas.name}}</view>
        <view class="u-f-ac" style="flex-wrap: wrap;">
          <view v-for="(item, index) in datas.actionLabel" :key="index" class="tag-item">{{item}}</view>
        </view>
      </view>
      <view class="item-list mbttom15">
        <view class="item-title u-f-ac">动作参数</view>
        <view class="canshu u-f-ac">
          <view class="cs_item"><text class="text-justify">组数<i></i></text>：{{datas.gropNum ? datas.gropNum+'组' : '无'}}</view>
          <view class="cs_item"><text class="text-justify">每组次数<i></i></text>：{{datas.numOfGroup ? datas.numOfGroup+'次' : '无'}}</view>
          <view class="cs_item"><text class="text-justify">每组时间<i></i></text>：{{datas.timeOfGroup ? datas.timeOfGroup+'S' : '无'}}</view>
          <view class="cs_item"><text class="text-justify">组间休息<i></i></text>：{{datas.restOfGroup ? datas.restOfGroup+'S' : '无'}}</view>
          <view class="cs_item"><text class="text-justify">阻力<i></i></text>：{{datas.obstruction ? datas.obstruction+'KG' : '无'}}</view>
          <view class="cs_item"><text class="text-justify">器械<i></i></text>：{{datas.devicesIdArray ? datas.devicesIdArray[0] : '无'}}</view>
        </view>
      </view>
      <view class="item-list mbttom15">
        <view class="item-title u-f-ac">锻炼部位</view>
        <view class="u-f">
          <!-- <view v-for="(item, index) in 3" :key="index" style="margin-right: 15rpx;font-size: 26rpx;">胸部</view> -->
          <view style="margin-right: 15rpx;font-size: 26rpx;">{{datas.actionPartNames}}</view>
        </view>
      </view>
      <view class="item-list">
        <view class="item-title u-f-ac">动作详情</view>
        <view class="move-detail">
          <view class="detail-title">动作介绍</view>
          <view v-html="datas.introduce"></view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
  export default {
    data() {
      return {
        datas: {},
      }
    },
    onLoad(e) {
      this.getData(e.actionId);
    },
    methods: {
      async getData(actionId) {
        let {data: {datas}} = await this.$myRuquest({
          url: '/coach/training/getActionListDetail',
          data: {
            actionId
          }
        })
        this.datas = datas;
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F7F7F7;
  }

  .bg-img {
    width: 100%;
    height: 28vh;
    background-color: #b4e0d8;

    image {
      width: 100%;
      height: 100%;
      background-size: cover;
      position: absolute;
    }
  }

  .title-list {
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 40rpx;

    .titles {
      font-weight: 600;
      font-size: 46rpx;
    }

    .tag-item {
      background-color: #F0EEF1;
      padding: 10rpx 20rpx;
      margin: 0 20rpx 10rpx 0;
    }
  }

  .item-list {
    width: 100%;
    padding: 20rpx;
    font-size: 34rpx;
    background-color: #fff;
  }

  .item-title {
    margin-bottom: 20rpx;
  }

  .item-title::before {
    content: '';
    display: inline-block;
    width: 10rpx;
    height: 26rpx;
    margin-right: 15rpx;
    background-color: $uni-color-zhuti;
  }

  .canshu {
    flex-wrap: wrap;
    font-size: 26rpx;
    width: 100%;
  }

  .cs_item {
    margin: 0 20rpx 30rpx 0;
    width: 44%;

    .text-justify {
      width: 120rpx;
      display: inline-block;
      text-align-last: justify;
    }
  }

  .cs_item::before {
    content: '';
    display: inline-block;
    width: 12rpx;
    height: 12rpx;
    margin-right: 15rpx;
    background-color: $uni-color-zhuti;
  }

  .move-detail {
    padding: 0 40rpx;
    font-size: 28rpx;
    .detail-title {
      margin-bottom: 10rpx;
    }

    .detail-title::before {
      content: '';
      display: inline-block;
      width: 8rpx;
      height: 8rpx;
      margin-right: 15rpx;
      background-color: $uni-color-zhuti;
    }
  }
</style>
